<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ol+网格</title>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>

</head>
<body>
<div id="map"></div>
<script>
  /**
   * 官方提供的网格API
   */
  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  });
  var map = new ol.Map({
    layers: [gaodeMapLayer],
    view: new ol.View({
      center: [120, 30],
      projection: 'EPSG:4326',
      zoom: 10
    }),
    target: 'map'
  });

  // grid
  var grid = new ol.Graticule({
    strokeStyle: new ol.style.Stroke({
      color: 'rgba(255,120,0,0.9)',
      width: 2,
      lineDash: [0.5, 4]
    }),
    showLabels: true
  });
  grid.setMap(map);


</script>
</body>
</html>
